<script>
import pendingTasksAxios from '@/api/myDesktop/pendingTasks/pendingTasks'
import Cookies from "js-cookie";


export default {
  name: "index2",
  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      pageNum: 1, // 当前页
      pageSize: 5, // 每页显示数量
      pages: 0, // 总页数
      form: {
        region: 1,
        dateRange: []
      },
      approvalInfo: {
        deptId: null,
        approvalResult: null,
        remarks: null
      },
      tableData: [{
        leaveID: null,
        userID: null,
        startDate: null,
        endDate: null,
        leaveType: null,
        reason: null,
        approved: null,
        status: null,
        approvalDate: null,
        users: {
          userID: null,
          userName: null,
          status: null,
          department: {
            deptName: null,
            manager: null,
          }
        },
        remarks: null
      },],
      pendingTasksObj: {
        leaveID: null,
        userID: null,
        startDate: null,
        endDate: null,
        leaveType: null,
        reason: null,
        approved: null,
        status: null,
        approvalDate: null,
        users: {
          userID: null,
          userName: null,
          status: null,
          department: {
            deptName: null,
            manager: null,
          }
        },
        remarks: null
      },
      lookAtDialogVisible: false, // 查看任务处理的显示状态
      auditDialogVisible: false, // 审核的显示状态
      leadershipAll: [{
        deptID: null,
        deptName: null
      }],
      id: null,
    }
  },
  mounted() {
    this.getData(this.pageNum, this.pageSize, this.form.region, this.form.dateRange);
  },
  methods: {
    getData: function (pageNum, pageSize, region, dateRange) {
      pendingTasksAxios.getPendingTasksList(pageNum, pageSize, region, dateRange)
          .then(res => {
            console.log("----------------->",res.data)
            if (res.data === null) {
              return this.$message.error("数据为空");
            }else {
              this.pages = res.data.total;
              this.pageSize = res.data.pageSize;
              this.pageNum = res.data.pageNum;
              this.tableData = res.data.list;
            }
          })
      console.log(this.tableData)
    },
    onSubmit: function (pageNum, pageSize, region, dateRange) {
      this.getData(pageNum, pageSize, region, dateRange);
    },
    onSubmit2: function (id, status, approvalInfo) {
      pendingTasksAxios.updatePendingTasksById(id, status, approvalInfo).then(res => {
        if (res.data === true) {
          this.$message.success("审核成功")
          location.reload()
        }else{
          this.$message.error("审核失败")
        }
      });

    },
    lookAt: function(id, boolean, status) {
      this.lookAtDialogVisible = boolean
      this.id = id;
      pendingTasksAxios.getPendingTasksListById(id, status).then((data) => {
        if (data !== null) {
          this.pendingTasksObj = data.data
        }
      }).catch((error) => {
        this.$message.error(error)
      })
    },
    audit: function(id, boolean, status) {
      this.getLeadershipById();
      this.auditDialogVisible = boolean
      this.id = id;
      pendingTasksAxios.getPendingTasksListById(id, status).then((data) => {
        if (data !== null) {
          this.pendingTasksObj = data.data
        }
      }).catch((error) => {
        this.$message.error(error)
      })
    },
    handleSizeChange: function (val) {
      this.pageSize = val;
      this.getData(this.pageNum, this.pageSize, this.form.region, this.form.dateRange);
    },
    handleCurrentChange: function (val) {
      this.pageNum = val;
      this.getData(this.pageNum, this.pageSize, this.form.region, this.form.dateRange);
    },
    //创建方法er
    dateDiffer: function(createdDate, dueDate){
      //date1结束时间
      let date1 = new Date(dueDate);
      //date2开始时间
      let date2 = new Date(createdDate);
      date1 = new Date(date1.getFullYear(), date1.getMonth(), date1.getDate());
      date2 = new Date(date2.getFullYear(), date2.getMonth(), date2.getDate());

      console.log(date1,date2)
      const diff = date1.getTime() - date2.getTime(); //目标时间减去当前时间
      const diffDate = diff / (24 * 60 * 60 * 1000);  //计算当前时间与结束时间之间相差天数
      return diffDate;
    },
    getLeadershipById: function() {
      let users = JSON.parse(Cookies.get("SET_USERS"));
      console.log("users: ",users);
      pendingTasksAxios.getLeadersAll(users.userID).then(data => {
        if (data !== null) {
          this.leadershipAll = data.data
        }
      })
    },
    //获取显示的信息
    getId: function(id) {
      return this.tableData[id].leaveID || this.tableData[id].travelID || this.tableData[id].usageID ||
        this.tableData[id].sealID || this.tableData[id].borrowID || this.tableData[id].printingID ||
        this.tableData[id].proofID;
    },
    getTheNameOfTheTask: function(id) {
      return this.tableData[id].reason || this.tableData[id].purpose || this.tableData[id].book.bookName;
    },
    getStartDate: function(id) {
      return this.tableData[id].startDate || this.tableData[id].startTime || this.tableData[id].applicationDate ||
        this.tableData[id].borrowDate;
    },
    getSponsor: function(id) {
      return this.tableData[id].users.userName;
    },
    getApprovalDate: function(id) {
      return this.tableData[id].approvalDate;
    },
    getStatus: function(id) {
      return this.tableData[id].status === true? "审核完成":"审核中";
    },

  }
}
</script>

<template>
  <div>
    <el-form :inline="true" :model="form" class="demo-form-inline">
      <el-form-item label="发起时间：">
        <div class="block">
          <el-date-picker
            v-model="form.dateRange"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right">
          </el-date-picker>
        </div>
      </el-form-item>
      <el-form-item>
        <el-select v-model="form.region">
          <el-option label="请假申请" :value="1"></el-option>
          <el-option label="出差申请" :value="2"></el-option>
          <el-option label="用车管理" :value="3"></el-option>
          <el-option label="用章管理" :value="4"></el-option>
          <el-option label="图书借阅申请" :value="5"></el-option>
          <el-option label="名片印制申请" :value="6"></el-option>
          <el-option label="收入证明" :value="7"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit(pageNum, pageSize, form.region, form.dateRange)">查 询</el-button>
      </el-form-item>
    </el-form>
    <div>
      <el-table
          :data="tableData"
          style="width: 100%" >
        <el-table-column
            label="任务名称"
            width="180">
          <template slot-scope="scope">
            <span>{{ getTheNameOfTheTask(scope.$index) }}</span>
          </template>
        </el-table-column>
        <el-table-column
            label="发起时间"
            width="180">
          <template slot-scope="scope">
            <span>{{ getStartDate(scope.$index) }}</span>
          </template>
        </el-table-column>
        <el-table-column
            label="发起人"
            width="180">
          <template slot-scope="scope">
            <span>{{ getSponsor(scope.$index) }}</span>
          </template>
        </el-table-column>
        <el-table-column
            label="最后审批时间"
            width="180">
          <template slot-scope="scope">
            <span>{{ getApprovalDate(scope.$index) }}</span>
          </template>
        </el-table-column>
        <el-table-column
            label="状态"
            width="180">
          <template slot-scope="scope">
            <span>{{getStatus(scope.$index)}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button v-if="!scope.row.status"
                style="float: left"
                type="danger"
                size="mini"
                @click="audit(getId(scope.$index), true, form.region)">审核</el-button>
            <el-button
                style="float: right"
                size="mini"
                @click="lookAt(getId(scope.$index),true, form.region)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[5, 10, 25]"
            :page-size="this.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="this.pages">
        </el-pagination>
      </div>
    </div>
    <!--    查看任务-->
    <el-dialog
      title="任务明细"
      :visible.sync="lookAtDialogVisible"
      width="60%"
      :append-to-body="true">
      <div>
        <table width="100%">
          <tr>
            <th colspan="2" style="float: left">详细</th>
          </tr>
          <tr>
            <td>
              <p>姓名：<span>{{pendingTasksObj.users.userName}}</span></p>
            </td>
            <td>
              <p>部门：<span>{{pendingTasksObj.users.department.deptName}}</span></p>
            </td>
          </tr>
          <tr>
            <td>
              <p>开始时间：<span>{{
                  pendingTasksObj.startDate ||
                  pendingTasksObj.startTime ||
                  pendingTasksObj.applicationDate ||
                  pendingTasksObj.borrowDate
                }}</span></p>
            </td>
            <td v-if="form.region ===1 || form.region === 2|| form.region === 3">
              <p>结束时间：<span>{{
                  pendingTasksObj.endDate ||
                  pendingTasksObj.endTime
                }}</span></p>
            </td>
          </tr>
          <tr>
            <td v-if="form.region===1||form.region===2">
              <p>请假天数：<span>{{dateDiffer(
                pendingTasksObj.startDate,
                pendingTasksObj.endDate
              )}}</span> 天</p>
            </td>
            <td v-if="form.region===1">
              <p>请假类型：<span>{{pendingTasksObj.leaveType}}</span></p>
            </td>
            <td v-if="form.region===3">
              <p>目的地：<span>{{pendingTasksObj.destination}}</span></p>
            </td>
            <td v-if="form.region===4">
              <p>印章名称：<span>{{pendingTasksObj.sealName}}</span></p>
            </td>
            <td v-if="form.region===5">
              <p>借阅图书名称：<span>{{pendingTasksObj.book.bookName}}</span></p>
            </td>
            <td v-if="form.region!==5">
              <p>事由：<span>{{pendingTasksObj.reason || pendingTasksObj.purpose}}</span></p>
            </td>
          </tr>
          <tr>
            <th colspan="2" style="float: left">审批信息</th>
          </tr>
          <tr>
            <td>
              <p>
                审批人：
                <span >
                  {{pendingTasksObj.users.department.manager}}
                </span>
              </p>
            </td>
            <td>
              <p>审批时间：<span>{{pendingTasksObj.approvalDate}}</span></p>
            </td>
            <td>
              <p>审批结果：<span>{{(pendingTasksObj.approved || pendingTasksObj.approval ||
                pendingTasksObj.approvalStatus) === true?
                "审批通过": (pendingTasksObj.approved || pendingTasksObj.approval ||
                  pendingTasksObj.approvalStatus) === false? "驳回":""}}</span></p>
            </td>
          </tr>
          <tr v-if="pendingTasksObj.remarks !== null">
            <td>
              <p>审批信息：<span>{{pendingTasksObj.remarks}}</span></p>
            </td>
          </tr>
        </table>
      </div>
    </el-dialog>

    <!--    审核任务 -->
    <el-dialog
      title="审核"
      :visible.sync="auditDialogVisible"
      width="60%"
      :append-to-body="true">
      <div>
        <form action="">
          <table>
            <tr>
              <th colspan="2" style="float: left">详细</th>
            </tr>
            <tr>
              <td>
                <p>姓名：<span>{{pendingTasksObj.users.userName}}</span></p>
              </td>
              <td>
                <p>部门：<span>{{pendingTasksObj.users.department.deptName}}</span></p>
              </td>
            </tr>
            <tr>
              <td>
                <p>开始时间：<span>{{
                    pendingTasksObj.startDate ||
                    pendingTasksObj.startTime ||
                    pendingTasksObj.applicationDate ||
                    pendingTasksObj.borrowDate
                  }}</span></p>
              </td>
              <td v-if="form.region!==4 || form.region!==5">
                <p>结束时间：<span>{{
                    pendingTasksObj.endDate ||
                    pendingTasksObj.endTime
                  }}</span></p>
              </td>
            </tr>
            <tr>
              <td v-if="form.region===1||form.region===2">
                <p>请假天数：<span>{{dateDiffer(
                  pendingTasksObj.startDate,
                  pendingTasksObj.endDate
                )}}</span> 天</p>
              </td>
              <td v-if="form.region===1">
                <p>请假类型：<span>{{pendingTasksObj.leaveType}}</span></p>
              </td>
              <td v-if="form.region===3">
                <p>目的地：<span>{{pendingTasksObj.destination}}</span></p>
              </td>
              <td v-if="form.region===4">
                <p>印章名称：<span>{{pendingTasksObj.sealName}}</span></p>
              </td>
              <td v-if="form.region===5">
                <p>借阅图书名称：<span>{{pendingTasksObj.book.bookName}}</span></p>
              </td>
              <td v-if="form.region!==5">
                <p>事由：<span>{{pendingTasksObj.reason || pendingTasksObj.purpose}}</span></p>
              </td>
            </tr>
            <tr>
              <th colspan="2" style="float: left">操作</th>
            </tr>
            <tr>
              <td>
                <el-form ref="form" :model="approvalInfo" label-width="100px">
                  <el-form-item label="审核状态：">
                    <el-radio-group v-model="approvalInfo.approvalResult">
                      <el-radio label="1">通过</el-radio>
                      <el-radio label="0">驳回</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="领导人：" v-if="approvalInfo.approvalResult==1">
                    <el-select v-model="approvalInfo.deptId" placeholder="-请选择-">
                      <el-option v-for="item in leadershipAll" :key="item.deptID"
                                 :label="item.manager" :value="item.deptID"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="审批意见：">
                    <el-input type="textarea" v-model="approvalInfo.remarks"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="onSubmit2(
                      pendingTasksObj.leaveID ||
                      pendingTasksObj.travelID ||
                      pendingTasksObj.usageID ||
                      pendingTasksObj.sealID ||
                      pendingTasksObj.borrowID ||
                      pendingTasksObj.printingID ||
                      pendingTasksObj.proofID,
                     form.region, approvalInfo)">保存</el-button>
                  </el-form-item>
                </el-form>
              </td>
            </tr>
          </table>
        </form>
      </div>
    </el-dialog>

  </div>
</template>

<style scoped lang="scss">
  .el-form{
    margin: 20px;
  }
  .el-table {
    margin: 30px;
  }
</style>
